


import React from 'react';
import { useEffect } from 'react';
import { memo } from 'react';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';
import { getRadioRecommendAction } from '../../store/actionCreators'

import ThemeHeaderNormal from '@/components/theme-header-normal';
import RadioRecommendCover from '@/components/radio-recommend-cover/index.jsx';

import sty from './sty.module.css';

const RadioRecommend = () => {
  const { currentId, recommends } = useSelector(state => ({
    currentId: state.getIn(['djradio', 'currentId']),
    recommends: state.getIn(['djradio', 'recommends'])
  }), shallowEqual)

  const dispatch = useDispatch();

  useEffect(() => {
    if (currentId === 0) {
      return
    }
    dispatch(getRadioRecommendAction(currentId))
  }, [dispatch, currentId])



  return (< >
    {
      !!recommends.length && (< >
        <ThemeHeaderNormal title='优秀新电台' />
        <ul className={sty.radioList}>
          {
            recommends.slice(0, 5).map(v => < RadioRecommendCover key={v.id} info={v} />)
          }
        </ul>
      </>)
    }

  </ >)
}
export default memo(RadioRecommend)